<template>
	<div class="user-list-container">
		<!-- 页面标题和操作栏 -->
		<div class="page-header">
			<div class="left">
				<h2 class="title">用户管理</h2>
				<p class="subtitle">共 {{ total }} 个用户</p>
			</div>
			<div class="right">
				<ElButton
					:icon="Plus as any"
					type="primary"
					class="add-button"
					@click="onAddUser">
					新增用户
				</ElButton>
				<ElButton color="rgb(236, 237, 240)" :icon="Download as any">导入</ElButton>
				<ElButton color="rgb(236, 237, 240)" :icon="Upload as any">导出</ElButton>
			</div>
		</div>

		<div class="table-content">
			<!-- 搜索和筛选区 -->
			<div class="table-actions">
				<div class="left-actions">
					<ElButtonGroup class="view-switch">
						<ElButton :type="modelStore.model === 'cell' ? 'primary' : ''" @click="modelStore.onUpdateModel('cell')">
							<ElIcon>
								<Grid />
							</ElIcon>
						</ElButton>
						<ElButton :type="modelStore.model === 'row' ? 'primary' : ''" @click="modelStore.onUpdateModel('row')">
							<ElIcon>
								<Menu />
							</ElIcon>
						</ElButton>
					</ElButtonGroup>

					<ElInput
						v-model="searchForm.keyword"
						placeholder="搜索用户..."
						class="search-input"
						:prefix-icon="Search as any"
						clearable
						@keyup.enter="handleSearch" />
					<ElButton
						:icon="Filter as any"
						class="filter-button"
						@click="showFilterDrawer = true"
						color="rgb(236, 237, 240)">
						筛选
						<ElTag
							v-if="activeFilters > 0"
							size="small"
							type="info"
							class="filter-count">
							{{ activeFilters }}
						</ElTag>
					</ElButton>
				</div>
				<div class="right-actions">
					<ElPopover v-if="modelStore.model === 'row'" placement="bottom-start"
							   title="Title">
						<template #reference>
							<ElButton color="rgb(236, 237, 240)">
								列
								<ElIcon class="el-icon--right">
									<CaretBottom />
								</ElIcon>
							</ElButton>
						</template>
						2131231s
					</ElPopover>

					<ElPopover placement="bottom-start"
							   title="Title">
						<template #reference>
							<ElButton :icon="Tickets as any" color="rgb(236, 237, 240)">
								<ElIcon class="el-icon--right">
									<CaretBottom />
								</ElIcon>
							</ElButton>
						</template>
						2131231s
					</ElPopover>
				</div>
			</div>

			<!-- 用户列表表格 -->
			<div class="table-container">
				<component :is="modelStore.model" :list="userList" />
				<!-- 分页 -->
				<div class="pagination-container">
					<ElPagination
						v-model:current-page="currentPage"
						v-model:page-size="pageSize"
						background
						:total="total"
						:page-sizes="[10, 20, 50, 100]"
						layout="prev, pager, next"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange" />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { Search, Plus, Filter, CaretBottom, Tickets, Download, Upload } from "@element-plus/icons-vue";
import Cell from "./components/cell/index.vue";
import Row from "./components/row/index.vue";
import { useConfigStore } from "./store";

defineOptions({
	components: {
		Cell,
		Row,
	},
});

const modelStore = useConfigStore();

// 搜索和筛选表单
const searchForm = reactive({
	keyword: "",
	status: "",
	role: "",
	registerTime: "",
	progress: [0, 100],
	tags: [],
	lastLoginRange: [],
});

// 筛选抽屉
const showFilterDrawer = ref(false);

// 计算激活的筛选器数量
const activeFilters = computed(() => {
	let count = 0;
	if (searchForm.status) count++;
	if (searchForm.role) count++;
	if (searchForm.registerTime) count++;
	if (searchForm.progress[0] > 0 || searchForm.progress[1] < 100) count++;
	if (searchForm.tags.length > 0) count++;
	if (searchForm.lastLoginRange.length > 0) count++;
	return count;
});

// 表格数据
const loading = ref(false);
const userList = ref([
	{
		id: 1,
		username: "admin",
		nickname: "管理员",
		avatar: "https://example.com/avatar.jpg",
		phone: "13800138000",
		email: "admin@example.com",
		role: "admin",
		status: "active",
		progress: 100,
		createTime: "2023-01-01 12:00:00",
	},
	{
		id: 2,
		username: "user",
		nickname: "用户",
		avatar: "https://example.com/avatar.jpg",
		phone: "13800138001",
		email: "user@example.com",
		role: "user",
		status: "active",
		progress: 80,
		createTime: "2023-01-02 12:00:00",
	},
	{
		id: 3,
		username: "admin",
		nickname: "管理员",
		avatar: "https://example.com/avatar.jpg",
		phone: "13800138000",
		email: "admin@example.com",
		role: "user",
		status: "active",
		progress: 60,
		createTime: "2023-01-01 12:00:00",
	},
	{
		id: 4,
		username: "user",
		nickname: "用户",
		avatar: "https://example.com/avatar.jpg",
		phone: "13800138001",
		email: "user@example.com",
		role: "user",
		status: "active",
		progress: 60,
		createTime: "2023-01-02 12:00:00",
	},
	{
		id: 5,
		username: "admin",
		nickname: "管理员",
		avatar: "https://example.com/avatar.jpg",
		phone: "13800138000",
		email: "admin@example.com",
		role: "user",
		status: "active",
		progress: 30,
		createTime: "2023-01-01 12:00:00",
	},
	{
		id: 6,
		username: "user",
		nickname: "用户",
		avatar: "https://example.com/avatar.jpg",
		phone: "13800138001",
		email: "user@example.com",
		role: "user",
		status: "active",
		progress: 90,
		createTime: "2023-01-02 12:00:00",
	},
	{
		id: 7,
		username: "user",
		nickname: "用户",
		avatar: "https://example.com/avatar.jpg",
		phone: "13800138001",
		email: "user@example.com",
		role: "user",
		status: "active",
		progress: 30,
		createTime: "2023-01-02 12:00:00",
	},
	{
		id: 8,
		username: "admin",
		nickname: "管理员",
		avatar: "https://example.com/avatar.jpg",
		phone: "13800138000",
		email: "admin@example.com",
		role: "user",
		status: "active",
		progress: 100,
		createTime: "2023-01-01 12:00:00",
	},
]);

// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);

// 搜索
const handleSearch = () => {
	currentPage.value = 1;
	fetchUserList();
};

// 获取用户列表
const fetchUserList = () => {
	loading.value = true;
	// 模拟接口请求
	setTimeout(() => {
		loading.value = false;
	}, 500);
};

// 分页大小改变
const handleSizeChange = (val: number) => {
	pageSize.value = val;
	fetchUserList();
};

// 页码改变
const handleCurrentChange = (val: number) => {
	currentPage.value = val;
	fetchUserList();
};
fetchUserList();

const onAddUser = () => {};
</script>

<style lang="scss" scoped src="./index.scss"></style>
